import MyIcon from "@/components/common/Icon/MyIcon";
import { Flex } from "@chakra-ui/react";
import { useMemo } from "react";
import {
  BezierEdge,
  EdgeLabelRenderer,
  EdgeProps,
  getBezierPath,
} from "reactflow";

export const ButtonEdge = (props: EdgeProps) => {
  const {
    id,
    sourceX,
    sourceY,
    targetX,
    targetY,
    sourcePosition,
    targetPosition,
    selected,
    source,
    sourceHandleId,
    target,
    targetHandleId,
    style,
  } = props;

  const edgeColor = useMemo(() => {

    return '#94B5FF';
    // const colorMap = {
    //     [RuntimeEdgeStatusEnum.active]: '#39CC83',
    //     [RuntimeEdgeStatusEnum.waiting]: '#5E8FFF',
    //     [RuntimeEdgeStatusEnum.skipped]: '#8A95A7'
    //   };
    //   return colorMap[targetEdge.status];
  }, [])
  // 使用 getBezierPath 计算贝塞尔曲线路径
  const [, labelX, labelY] = getBezierPath({
    sourceX,
    sourceY,
    targetX,
    targetY,
    sourcePosition,
    targetPosition,
  });

  const newTargetX = targetX;
  const newTargetY = targetY;

  const edgeStyle = (() => {
    return {
      ...style,
      strokeWidth: 3,
      zIndex: 2
    }
  })()

  const memoEdgeLabel = useMemo(() => {
    const arrowTransform = (() => {
      if (targetPosition === 'left') {
        return `translate(-85%, -47%) translate(${newTargetX}px,${newTargetY}px) rotate(0deg)`;
      }
      if (targetPosition === 'right') {
        return `translate(-10%, -50%) translate(${newTargetX}px,${newTargetY}px) rotate(-180deg)`;
      }
      if (targetPosition === 'bottom') {
        return `translate(-50%, -20%) translate(${newTargetX}px,${newTargetY}px) rotate(-90deg)`;
      }
      if (targetPosition === 'top') {
        return `translate(-50%, -90%) translate(${newTargetX}px,${newTargetY}px) rotate(90deg)`;
      }
    })();
    

  },[]);

  return (
    <>
      <BezierEdge {...props} style={{
        ...edgeStyle,
        stroke: edgeColor
      }} />
      <EdgeLabelRenderer>
        <Flex
          w={'17px'} h={'17px'}   bg={'white'} zIndex={1000}
          style={{
            position: "absolute",
            transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
            pointerEvents: "all",
          }}
          className="nodrag nopan"
        >
              <MyIcon name={'core/workflow/closeEdge'} w={'100%'}></MyIcon>
        </Flex>
      </EdgeLabelRenderer>
    </>
  );
};

// 自定义边缘组件
